<script setup lang="ts">
import { Autoplay, Pagination } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/css/pagination";

defineProps<{
  list: any[];
}>();

const paginationElRef = ref();
</script>

<template>
  <div class="relative m-5">
    <ClientOnly>
      <Swiper
        loop
        centeredSlides
        :speed="500"
        :slidesPerView="1"
        :loopPreventsSlide="true"
        :modules="[Autoplay, Pagination]"
        :autoplay="{ delay: 3000, disableOnInteraction: false }"
        :pagination="{
          enabled: true,
          el: paginationElRef,
          type: 'bullets',
        }"
      >
        <SwiperSlide v-for="(item, index) in list" :key="index">
          <div class="relative">
            <img :src="item.srcM" class="w-full" />
            <div class="absolute left-0 bottom-8vw w-full text-3.6vw text-center">
              <!-- <a href="#" class="mx-3">立 即 购 买 ></a> -->
              <a :href="item.href" target="_blank" class="mx-3">立 即 抢 购 ></a>
            </div>
          </div>
        </SwiperSlide>
      </Swiper>
    </ClientOnly>

    <div class="absolute bottom-3 left-1/2 -translate-x-1/2 z-10">
      <div ref="paginationElRef" />
    </div>
  </div>
</template>

<style lang="less">
.swiper-pagination-bullet {
  background-color: #ccc;
  opacity: 1;
  width: 6px;
  height: 6px;
}

/* 覆盖激活状态的分页点样式 */
.swiper-pagination-bullet-active {
  background-color: #7948ea;
}
</style>
